/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --spectrum-splitview-vertical-width: 100%;
    --spectrum-splitview-vertical-gripper-width: 50%;
    --spectrum-splitview-vertical-gripper-outer-width: 100%;
    --spectrum-splitview-vertical-gripper-reset: 0;
    --spectrum-splitview-content-color: var(--spectrum-body-color);
    --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
    --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
    --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
    --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
    --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
    --spectrum-splitview-gripper-height: 16px;
    --spectrum-splitview-gripper-border-width-horizontal: 3px;
    --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
    display: flex;
    overflow: hidden;
}

::slotted(*) {
    block-size: 100%;
    background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
    color: var(--mod-splitview-content-color, var(--spectrum-splitview-content-color));
}

#gripper {
    content: "";
    border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
    border-style: solid;
    border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
    touch-action: none;
    inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
    block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
    border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
    border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2 * -1);
    transform: translateY(-50%);
}

#gripper:before {
    background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
}

#splitter {
    background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
    -webkit-user-select: none;
    user-select: none;
    inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
    block-size: 100%;
    z-index: 1;
    position: relative;
}

#splitter.is-collapsed-end #gripper:before,
#splitter.is-collapsed-start #gripper:before {
    content: "";
    inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
    block-size: 100%;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(50% - var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2);
}

#splitter.is-collapsed-start #gripper {
    inset-inline-start: 0;
}

#splitter.is-collapsed-end #gripper {
    inset-inline: auto 0;
}

:host([resizable]) #splitter.is-hovered {
    background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
}

:host([resizable]) #splitter.is-hovered #gripper {
    border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
}

:host([resizable]) #splitter.is-hovered #gripper:before {
    background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
}

@media (hover: hover) {
    :host([resizable]) #splitter:hover {
        background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
    }

    :host([resizable]) #splitter:hover #gripper {
        border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
    }

    :host([resizable]) #splitter:hover #gripper:before {
        background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
    }
}

:host([resizable]) #splitter.is-active,
:host([resizable]) #splitter:active {
    background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
}

:host([resizable]) #splitter.is-active #gripper,
:host([resizable]) #splitter:active #gripper {
    border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
}

:host([resizable]) #splitter.is-active #gripper:before,
:host([resizable]) #splitter:active #gripper:before {
    background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
}

:host([resizable]) #splitter:focus {
    outline: none;
}

:host([resizable]) #splitter:focus-visible {
    background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
    outline: none;
}

:host([resizable]) #splitter:focus-visible #gripper {
    border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
    box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
}

:host([resizable]) #splitter:focus-visible #gripper:before {
    background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
}

:host([vertical]) {
    flex-direction: column;
}

:host([vertical]) ::slotted(*) {
    block-size: auto;
    inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
}

:host([vertical]) #gripper {
    transform: translate(calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) * -1));
    inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
    block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
    border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
    border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
    inset-block-start: calc((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2 * -1);
    inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
}

:host([vertical]) #splitter {
    inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
    block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
}

:host([vertical]) #splitter.is-collapsed-end #gripper,
:host([vertical]) #splitter.is-collapsed-start #gripper {
    inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
}

:host([vertical]) #splitter.is-collapsed-end #gripper:before,
:host([vertical]) #splitter.is-collapsed-start #gripper:before {
    inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
    block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
    inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2);
    inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
}

:host([vertical]) #splitter.is-collapsed-start #gripper {
    inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
}

:host([vertical]) #splitter.is-collapsed-end #gripper {
    inset-block-start: auto;
    inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
}

@media (forced-colors: active) {
    :host {
        --highcontrast-splitview-handle-background-color: CanvasText;
        --highcontrast-splitview-handle-background-color-hover: CanvasText;
        --highcontrast-splitview-handle-background-color-down: CanvasText;
        --highcontrast-splitview-handle-background-color-focus: Highlight;
    }
}
